import { IRootReducerState } from '@/store/root-reducer';
import Icon, {
  IconChevronRight,
  IconCustomerSupport,
  IconExternalOpenStroked,
  IconGallery,
  IconGlobe,
  IconSmartphoneStroked,
} from '@douyinfe/semi-icons';
import {
  Button,
  Select,
  Layout,
  Nav,
  SideSheet,
  Space,
  Dropdown,
  Avatar,
} from '@douyinfe/semi-ui';
import { useEffect, useState } from 'react';
import { shallowEqual, useSelector } from 'react-redux';
import { Link, Outlet, useNavigate, useNavigation } from 'react-router-dom';
import * as authAction from '@/redux/auth/auth-actions';
import { useDispatch } from 'react-redux';
import useCaptureReport from '@/hooks/capture-report';
import logo from '@/assets/logo-color.svg';

const Home = () => {
  const { Header } = Layout;
  const { Option } = Select;

  let navigation = useNavigation();
  let navigate = useNavigate();
  let captureProps = useCaptureReport({
    onCaptureReport: (e) => {
      // console.log(e);
    },
    onCancel: () => {},
    onSubmitReport: (value: any) => {
      console.log(value);
    },
  });

  const [userPanel, setUserPanel] = useState(false);

  const dispatch = useDispatch<any>();
  const { auth } = useSelector<IRootReducerState, any>(
    (state) => ({ auth: state.auth }),
    shallowEqual
  );
  const { user, organizes, organizeId } = auth;

  const logout = async () => {
    const result = await dispatch(authAction.logout());
    if (result) {
      navigate('/login');
    }
  };

  return (
    <>
      {navigation.state == 'loading' && <div className='navigation-loader' />}
      <Layout className='layout-container'>
        <Header>
          <Nav
            mode={'horizontal'}
            renderWrapper={({ itemElement, isSubNav, isInSubNav, props }) => {
              const routerMap: any = {
                // Home: '/',
                OperationCenter: '/',
                // Test: '/main/test',
                // Sub: '/sub',
                // 'Nothing Here': '/nothing-here',
              };
              return (
                <Link
                  style={{ textDecoration: 'none' }}
                  to={routerMap[props.itemKey as any]}>
                  {itemElement}
                </Link>
              );
            }}
            items={[
              // { itemKey: 'Home', text: 'Home' },
              { itemKey: 'OperationCenter', text: '运营中心' },
              // { itemKey: 'Test', text: 'Test' },
              // { itemKey: 'Sub', text: 'Sub' },
            ]}
            header={<img src={logo} className='h-8' alt='sec logo' />}
            footer={
              <Space spacing='loose'>
               
                <Dropdown
                  trigger='click'
                  clickToHide
                  render={
                    <Dropdown.Menu className='w-[240px]'>
                      <Dropdown.Title>用户信息</Dropdown.Title>
                      <Dropdown.Item onClick={(_) => setUserPanel(true)}>
                        <div className='flex flex-col items-start'>
                          欢迎您，{user?.name}
                          <div className='text-[12px] text-gray-400'>
                            <span>{user?.dept?.name}</span>
                          </div>
                        </div>
                        <Button
                          type='tertiary'
                          size='small'
                          className='ms-auto'
                          icon={<IconExternalOpenStroked />}></Button>
                      </Dropdown.Item>
                      <Dropdown.Divider />
                      <Dropdown.Title>系统设置</Dropdown.Title>
                      <Dropdown.Item disabled>语言</Dropdown.Item>
                      <Dropdown.Item disabled>主题</Dropdown.Item>
                      <Dropdown.Divider />
                      <Dropdown.Item
                        icon={<IconCustomerSupport />}
                        {...captureProps}>
                        <div>
                          <span className='text-pink-500'>系统反馈</span>
                          <div className='text-[12px] text-gray-400'>
                            您的意见让我们变得更好
                          </div>
                        </div>
                        <Button
                          type='tertiary'
                          size='small'
                          className='ms-auto'
                          icon={<IconExternalOpenStroked />}></Button>
                      </Dropdown.Item>
                      <Dropdown.Divider />
                      <Dropdown.Item onClick={logout}>退出</Dropdown.Item>
                    </Dropdown.Menu>
                  }>
                  <div className='group/user cursor-pointer'>
                    <Avatar size='small' src={user?.avatar} className='me-2'>
                      {typeof user?.name === 'string' &&
                        user?.name.slice(0, 1)}
                    </Avatar>
                    <div className='inline-block group-hover/user:bg-gray-100 text-sm text-gray-500 p-1.5 rounded'>
                      {user.name}
                    </div>
                  </div>
                </Dropdown>
              </Space>
            }>
            {/* <Button style={{ marginLeft: 10 }}>基础配置</Button>
            <Button style={{ marginLeft: 10 }}>报表数据</Button> */}
          </Nav>
        </Header>
        <Outlet />
      </Layout>

      <SideSheet
        title='滑动侧边栏'
        visible={userPanel}
        onCancel={() => {
          setUserPanel(false);
        }}>
        <p>This is the content of a basic sidesheet.</p>
        <p>Here is more content...</p>
      </SideSheet>
    </>
  );
};

export default Home;
